<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>每一点</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        ul li img.front_img {
            width: 313px;
            height: 100%;
        }

        .fl {
            float: left;
        }

        .item {
            display: flex;
            margin-top: 20px;
            border-bottom: 1px solid #CCCCCC;
        }

        ul li .middle_part {
            width: 260px;
            margin-left: 20px;
            border-right: 1px solid #CCCCCC;
        }

        ul li .middle_part p {
            font-size: 14px;
            line-height: 22px;
            color: #223318;
            font-weight: bold;
        }

        ul li .middle_part p.inner1 {
            height: 48px;
            line-height: 24px;
        }

        ul li .middle_part p.inner2 {
            height: 84px;
            line-height: 28px;
            word-break: break-all;
        }

        ul li .middle_part p.inner3 {
            line-height: 40px;
        }

        ul li .middle_part p.inner4 {
            line-height: 26px;
        }

        ul li .right_part {
            margin-left: 50px;
            margin-top: 100px;
        }

        #main .content ul li > div {
            margin-top: 20px;
            width: 273px;
            height: 196px;
            padding: 0 20px;
        }

        ul li .right_part .inner_text {
            width: 180px;
            height: 68px;
            top: 50%;
            left: 50%;
            font-weight: bold;
            font-size: 20px;
            margin-left: 50px;
            margin-top: -34px;
        }

        ul li .right_part .bottom_btn.several {
            text-align: right;
        }

        ul li .right_part p {
            line-height: 25px;
            text-align: center;
        }

        ul li .right_part .bottom_btn {
            width: 100px;
            position: absolute;
            text-align: center;
        }

        ul li .right_part .bottom_btn.several a:last-child {
            background-color: #37cb58;
            color: rgb(255, 247, 248);
            border: 0;
        }

        ul li p.inner2 a {
            text-decoration: underline;
            color: #43a4fc;
            cursor: pointer;
        }
    </style>
    <div>
        <!-- Header -->
        <div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
        <!-- Header -->
        <div class="layui-container">
            <div class="layui-row">
                <h2>我关注的项目</h2>
            </div>
            <div class="listing_default layui-row">
            </div>
            <div class="col-lg-12">
                <nav class="pagination">
                    <div id="pageShow"></div>
                </nav>
            </div>
        </div>

        <!--// CopyRight //-->
        <div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
        <!--// CopyRight //-->
    </div>

    <script type="text/javascript">
        function toCollection(projectId) {
            $.ajax({
                url: "/web/saveUserCollectionProject",
                type: "post",
                data: {"projectId": projectId},
                success: function (data) {
                    if (data.code == 401) {
                        window.location.href = "/web/common/login";
                    }
                    $("#toCollect" + projectId + "").addClass("hidden")
                    $("#toDeletCollect" + projectId + "").removeClass("hidden")
                },
                error: function (data) {
                }
            })
        }

        function toDeletCollection(projectId) {
            $.ajax({
                url: "/web/deleteUserCollectionProject",
                type: "post",
                data: {"projectId": projectId},
                success: function (data) {
                    if (data.code == 500){
                        layer.msg(data.message)
                    }
                    if (data.code == 200){
                        layer.msg(data.message)
                        window.location.reload();
                        $("#toCollect"+projectId+"").removeClass("hidden")
                        $("#toDeletCollect"+projectId+"").addClass("hidden")
                    }

                }
            })
        }
        layui.config({
            dir: '/layui/'
        }).extend({
            xmSelect: '/ep/lay/extends/xm-select'
        });
        layui.use(['jquery', 'form', 'upload', 'laypage', 'layedit', 'xmSelect', 'element'], function () {
                let $ = layui.jquery,
                    form = layui.form,
                    xmSelect = layui.xmSelect,
                    element = layui.element,
                    laypage = layui.laypage,
                    $view = $("#ep-user-order");

            initPageMain();
                //获取主要内容
                function initPageMain() {
                    //分页 每页3个
                    initPage(3);
                }

                //分页
                function initPage(limit) {
                    $.ajax({
                        url: "/web/user/getCollectionProjectList",
                        type: "get",
                        data: {"pageSize": limit, "pageNum": 1},
                        success: function (data) {
                            rows = data.data.rows;
                            total = data.data.total;
                            pageIndex = laypage.render({
                                elem: 'pageShow' //注意，这里的 test1 是 ID，不用加 # 号
                                , theme: '#fe6500'
                                , limit: limit
                                , groups: 5
                                , count: total //数据总数，从服务端得到
                                , jump: function (obj, first) {
                                    if (!first) {
                                        var pageSize = obj.limit;
                                        var pageNum = obj.curr;
                                        $.ajax({
                                            url: "/web/user/getCollectionProjectList",
                                            type: "get",
                                            data: {
                                                "pageSize": pageSize,
                                                "pageNum": pageNum
                                            },
                                            success: function (data) {
                                                rows = data.data.rows;
                                                total = data.data.total;
                                                initPageShow(rows);
                                            }
                                        })
                                    }
                                    initPageShow(rows);
                                }
                            });

                        }
                    })
                }

                function initPageShow(rows) {
                    console.log(rows)
                    var str = "";
                    for (var i = 0; i < rows.length; i++) {
                        str += "<article class=\"layui-col-md12\">\n" +
                            "                    <div class=\"directory-section\">\n" +
                            "                        <div class=\"cs_thumbsection\">\n" +
                            "                            <figure><a href=\"/web/project_info?projectId=" + rows[i].projectId + "\"><img src=\"/"+rows[i].ad+"\" alt=\"#\"></a></figure>\n" +
                            "                        </div>\n" +
                            "                        <div class=\"content_info\">\n" +
                            "                            <div class=\"title\">\n" +
                            "                                <h3><a href=\"/web/project_info?projectId=" + rows[i].projectId + "\">" + rows[i].title + "</a></h3>\n" +
                            "                                <p>" + rows[i].introduce + "</p>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"dr_info\">\n" +
                            "                                <ul>\n" +
                            "                                    <li><i class=\"cscolor icon-target5\"></i> $" + rows[i].goal + "</li>\n" +
                            "                                    <li><i class=\"cscolor icon-clock7\"></i> " + rows[i].fundBegin + "</li>\n" +
                            "                                </ul>\n" +
                            "                                <span class=\"bar\"><span style=\"width:"+ toPercentShow(rows[i].raiseGoal, rows[i].goal) + "\";\"></span></span>\n" +
                            "                                <div class=\"detail\"><span class=\"fund\">" + toPercent(rows[i].raiseGoal, rows[i].goal) + "</span> <a class=\"tolbtn close star\"\n" +
                            "                                                                                     data-placement=\"top\"\n" +
                            "                                                                                     data-toggle=\"tooltip\"\n" +
                            "                                                                                     data-original-title=\"Mark as Favorite\"></a>\n" +
                            "                                    <a style='cursor: pointer'  onclick=\"toDeletCollection(" + rows[i].projectId + ")\"\n" +
                            "                                       class=\"star icon-star cscolor\"></a>\n" +
                            "                                </div>\n" +
                            "\n" +
                            "                            </div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                </article>";
                    }
                    $(".listing_default").html(str)
                }

                // 计算进度条
                function toPercentShow(num, total) {
                    if (Math.round(num / total * 10000) > 10000) {
                        return (100 + "%");// 小数点后两位百分比
                    }
                    return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

                }

                // 计算比例
                function toPercent(num, total) {

                    return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

                }


            }
        )


    </script>